<!--
 * @Author: ChunLai
 * @Date: 2022-09-21 18:05:26
 * @LastEditTime: 2025-09-09 14:48:17
 * @Description: 新接口
 * @FilePath: \02.bldinsure\src\views\form\components\Count.vue
-->
<template>
  <div class="newModel step-bill">
    <div class="mt15 of_hid">
      <div class="topSec">
        <div>
          <div class="form-head-name">保单信息</div>
        </div>
        <div class="flex_ac" v-if="bankList.length > 0">
          <div
            class="ftc8 ft12 flex_ac"
            @click.stop="$refs.bankLimitTableRef.initCompnt()"
          >
            <MsImgIcon size="14" name="question" />
            <span class="ml5">银行限额表</span>
          </div>
          <!-- <MsImgIcon
            name="photo"
            class="ml20"
            @click.native="showSheet = true"
          /> -->
        </div>
      </div>
      <van-field
        readonly
        clickable
        name="datetimePicker"
        :input-align="inputAlign"
        :value="orderInfo.effectiveDate"
        label="生效日期"
        placeholder="点击选择时间"
        @click="showStartPicker"
        v-if="infoReg.hasOwnProperty('effectiveDate')"
      >
        <span
          class="ms-row-icon"
          slot="right-icon"
          v-if="insu2Year && insu2Year.maxDate > 1"
        ></span>
      </van-field>
      <van-field
        readonly
        clickable
        :input-align="inputAlign"
        name="datetimePicker"
        :value="orderInfo.expiryDate"
        label="截止日期"
        placeholder="点击选择时间"
        @click="showEndPicker"
        v-if="infoReg.hasOwnProperty('expiryDate')"
      />
      <van-field
        label="保单类型"
        class="refPrintPaper"
        @click="initTipField('printPolType')"
        :error="tipsInfo.printPolType !== ''"
        readonly
        :input-align="inputAlign"
        v-if="infoReg.hasOwnProperty('printPolType')"
      >
        <div slot="input">
          <MsRadios
            :curVal="orderInfo.printPolType"
            :arrList="contractTypeList"
            type="printPolType"
            @change="changeMsRadio"
          />
        </div>
      </van-field>
      <van-field
        label=""
        class="refqsContSelfFlag"
        @click="initTipField('qsContSelfFlag')"
        :error="tipsInfo.qsContSelfFlag !== ''"
        :input-align="inputAlign"
        readonly
        label-width="160px"
        v-if="infoReg.hasOwnProperty('qsContSelfFlag')"
      >
        <div slot="label" class="userSelect">
          <span>是否为自保件</span>
          <FieldDescMode field="qsContSelfFlag" />
        </div>
        <div class="flex_ac" slot="input">
          <MsRadios
            :curVal="orderInfo.qsContSelfFlag"
            :arrList="yesNoCheckList"
            type="qsContSelfFlag"
            @change="changeMsRadio"
          />
        </div>
      </van-field>
      <van-field
        label="合作医院"
        class="refhospitalCode"
        :value="orderInfo.hospitalCodeName"
        @click="
          tipsInfo.hospitalCode = '';
          showPopAction(
            'picker',
            'hospitalCode',
            hospitalCodeList,
            orderInfo.hospitalCode
          );
        "
        input-align="right"
        readonly
        placeholder="请选择"
        :error="tipsInfo.hospitalCode !== ''"
        v-if="infoReg.hasOwnProperty('hospitalCode')"
      >
        <span class="ms-row-icon" slot="right-icon"></span>
      </van-field>
      <van-field
        label="缴费方式"
        class="refpayMode"
        @click="initTipField('payMode')"
        :error="tipsInfo.payMode !== ''"
        readonly
        :input-align="inputAlign"
        v-if="infoReg.hasOwnProperty('payMode')"
      >
        <div slot="input">
          <MsRadios
            :curVal="orderInfo.payMode"
            :arrList="payModeList"
            type="payMode"
            @change="changeMsRadio"
          />
        </div>
      </van-field>
      <van-field
        label="账号类型"
        class="refbankCardType"
        @click="tipsInfo.bankCardType = ''"
        :error="tipsInfo.bankCardType !== ''"
        readonly
        :input-align="inputAlign"
        v-if="infoReg.hasOwnProperty('bankCardType')"
      >
        <div slot="input">
          <MsRadios
            :curVal="orderInfo.bankCardType"
            :arrList="bcardTypeList"
            type="bankCardType"
            @change="changeMsRadio"
          />
        </div>
      </van-field>
      <van-field
        label="账户姓名（投保人）"
        class="refbankAccName"
        :value="orderInfo.bankAccName"
        label-width="180px"
        :readonly="true"
        :input-align="inputAlign"
        v-if="infoReg.hasOwnProperty('bankAccName') && orderInfo.bankAccName"
      />
      <van-field
        label="银行名称"
        class="refbankCode"
        :value="orderInfo.bankName"
        @click="
          tipsInfo.bankCode = '';
          showPopAction('radioPick', 'bankCode', bankList, orderInfo.bankCode);
        "
        :input-align="inputAlign"
        readonly
        placeholder="请选择"
        :error="tipsInfo.bankCode !== ''"
        v-if="infoReg.hasOwnProperty('bankCode')"
      >
        <span class="ms-row-icon" slot="right-icon"></span>
      </van-field>
      <div class="show-tips warning-mode" v-if="showTips">
        {{ orderInfo.bankName }}
        <span
          v-if="
            orderInfo.payMode == 'R' &&
            (bankLimit.oneLimit || bankLimit.dayLimit)
          "
        >
          <i>：单笔{{ bankLimit.oneLimit }}，</i>
          <i>单日{{ bankLimit.dayLimit }}</i></span
        >
        <span v-if="orderInfo.payMode == '7' && bankLimit.batch"
          >:单笔{{ bankLimit.batch }}</span
        >
      </div>
      <van-field
        label="银行账号"
        class="refbankAccNo"
        v-model="orderInfo.bankAccNo"
        @click="tipsInfo.bankAccNo = ''"
        type="number"
        maxlength="21"
        clearable
        clear-trigger="always"
        :input-align="inputAlign"
        placeholder="请输入"
        :error="tipsInfo.bankAccNo !== ''"
        v-if="infoReg.hasOwnProperty('bankAccNo')"
      >
        <MsImgIcon
          name="camera_g"
          size="24"
          slot="button"
          @click.native="showSheet = true"
        />
      </van-field>
      <van-field
        label="开户行所在地"
        class="refbankArea"
        @click="
          tipsInfo.bankArea = '';
          showPopAction('address', 'bankArea', []);
        "
        :value="orderInfo.bankArea"
        :error="tipsInfo.bankArea !== ''"
        readonly
        rows="1"
        autosize
        type="textarea"
        placeholder="请选择"
        :input-align="inputAlign"
        v-if="infoReg.hasOwnProperty('bankArea')"
      >
        <span class="ms-row-icon" slot="right-icon"></span>
      </van-field>
      <van-field
        class="reffirBankMobile"
        v-model="orderInfo.firBankMobile"
        @focus="tipsInfo.firBankMobile = ''"
        :error="tipsInfo.firBankMobile !== ''"
        type="number"
        maxlength="11"
        clearable
        label-width="170px"
        clear-trigger="always"
        :input-align="inputAlign"
        placeholder="请输入"
        v-if="infoReg.hasOwnProperty('firBankMobile')"
      >
        <div slot="label" class="flexlabel">
          <span class="mr5">预留手机号</span>
          <div
            class="same_to_btn"
            :class="phoneSameWithAppnt ? 'is_same_res' : ''"
            @click.stop="
              tipsInfo.firBankMobile = '';
              sameToAppnt($event, 'firBankMobile');
            "
          >
            同投保人
          </div>
        </div>
      </van-field>
      <!--  -->
      <van-field
        label="保费逾期未付"
        class="refautoPayFlag"
        :input-align="inputAlign"
        @click="tipsInfo.autoPayFlag = ''"
        :error="tipsInfo.autoPayFlag !== ''"
        v-if="infoReg.hasOwnProperty('autoPayFlag')"
      >
        <div slot="input">
          <MsRadios
            :curVal="orderInfo.autoPayFlag"
            :arrList="autoPayList"
            type="aliveGetMode"
            @change="changeMsRadio"
          />
        </div>
      </van-field>
      <van-field
        label="续期/续保交费形式"
        class="refexpayMode"
        @click="tipsInfo.expayMode = ''"
        :error="tipsInfo.expayMode !== ''"
        label-width="140px"
        :input-align="inputAlign"
        v-if="infoReg.hasOwnProperty('expayMode')"
      >
        <div slot="input">
          <MsRadios
            :curVal="orderInfo.expayMode"
            :arrList="exModeList"
            type="expayMode"
            @change="changeMsRadio"
          />
        </div>
      </van-field>
      <van-field
        label="生存金转账授权"
        class="refaliveGetMode"
        @click="tipsInfo.aliveGetMode = ''"
        :error="tipsInfo.aliveGetMode !== ''"
        label-width="120px"
        v-if="infoReg.hasOwnProperty('aliveGetMode')"
        :input-align="inputAlign"
      >
        <div slot="input">
          <MsRadios
            :curVal="orderInfo.aliveGetMode"
            :arrList="aliveModeList"
            type="aliveGetMode"
            @change="changeMsRadio"
          />
        </div>
      </van-field>
      <div v-if="orderInfo.aliveGetMode == 'Y'">
        <van-field
          label="受益人授权账户名"
          class="refbnfBankAccName"
          v-model="orderInfo.bnfBankAccName"
          @click="tipsInfo.bnfBankAccName = ''"
          :error="tipsInfo.bnfBankAccName !== ''"
          label-width="140px"
          clearable
          clear-trigger="always"
          :input-align="inputAlign"
          placeholder="请输入"
          v-if="infoReg.hasOwnProperty('bnfBankAccName')"
        >
        </van-field>
        <van-field
          label="受益人授权账户"
          class="refbnfBankAccNo"
          v-model="orderInfo.bnfBankAccNo"
          @click="tipsInfo.bnfBankAccNo = ''"
          :error="tipsInfo.bnfBankAccNo !== ''"
          type="number"
          maxlength="21"
          clearable
          clear-trigger="always"
          :input-align="inputAlign"
          placeholder="请输入"
          label-width="140px"
          v-if="infoReg.hasOwnProperty('bnfBankAccNo')"
        >
        </van-field>
        <van-field
          label="受益人开户银行"
          class="refbnfBankCode"
          :value="orderInfo.bnfBankCodeName"
          @click="
            tipsInfo.bnfBankCode = '';
            showPopAction(
              'picker',
              'bnfBankCode',
              bankList,
              orderInfo.bnfBankCode
            );
          "
          :error="tipsInfo.bnfBankCode !== ''"
          :input-align="inputAlign"
          readonly
          placeholder="请选择"
          label-width="140px"
          v-if="infoReg.hasOwnProperty('bnfBankCode')"
        >
          <span class="ms-row-icon" slot="right-icon"></span>
        </van-field>
      </div>
    </div>

    <van-popup v-model="showPop" round position="bottom" v-if="showPop">
      <van-picker
        v-if="popConfig.type == 'picker'"
        ref="picker"
        show-toolbar
        :columns="viewOptions"
        @confirm="onConfirmPick"
        @cancel="showPop = false"
        :default-index="defaultIndex"
      >
        <div slot="title" class="keyBox" v-if="popConfig.list.length > 8">
          <input
            type="text"
            class="keyInput"
            placeholder="请输入关键字查询"
            v-model="keyWord"
          />
        </div>
      </van-picker>
      <Address
        v-else-if="popConfig.type == 'address'"
        filterCode=""
        @cancle="showPop = false"
        @addresssConfirm="addresssConfirm"
      />
      <!-- 银行卡限额选择 -->
      <RadioBankSelect
        :viewOptions="viewOptions"
        :bankCode="orderInfo.bankCode"
        :payMode="orderInfo.payMode"
        @sureClick="showPop = false"
        @changeRadio="conformRadio"
        v-else-if="popConfig.type == 'radioPick'"
      />
    </van-popup>

    <OcrRecoganizePop
      :showOcrPop="showSheet"
      :bankType="orderInfo.payMode"
      ocrType="bank"
      @sureBtn="ocrSureBtn"
      v-if="showSheet"
    ></OcrRecoganizePop>
    <BankLimitTable ref="bankLimitTableRef" />
    <!-- 时间选择器 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        :min-date="minDate"
        :max-date="maxDate"
        type="date"
        @confirm="onBeginConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <van-popup v-model="endPicker" position="bottom">
      <van-datetime-picker
        :min-date="minDate"
        :max-date="maxEndDate"
        type="date"
        @confirm="onEndConfirm"
        @cancel="endPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import BankLimitTable from "@/components/BankLimitTable";
import RadioBankSelect from "./RadioBankSelect.vue";
import { validBillInfo } from "@/translate/validate/customer";
import { accountCodeFormat } from "@/methods/format.js";
import { inputInfoForBillMixin } from "@/mixins/info_bill";
import { billDateMixin } from "@/mixins/billdate";
import FieldDescMode from "./FieldDescMode";

export default {
  name: "BillNewPage",
  components: {
    BankLimitTable,
    RadioBankSelect,
    FieldDescMode,
  },
  data() {
    return {
      defaultIndex: 0,
      showPop: false,
      showSheet: false,
      foI3: false,
      foI4: false,
      popConfig: {
        list: [],
      },
      keyWord: "", //关键字查询
      inputAlign: "right",
      bankLimit: {
        text: "",
        oneLimit: "",
        dayLimit: "",
        batch: "",
      },
      orderInfo: {
        transrNo: "",
        hospitalCode: "",
        hospitalCodeName: "",
        printPolType: "E",
        payMode: "R",
        bankCode: "",
        bankName: "",
        bankAccName: "",
        bankAccNo: "",
        firBankMobile: "",
        bankProvince: "",
        bankCity: "",
        bankCounty: "",
        bankArea: "",
        bankCardType: "",
        autoPayFlag: "0",
        aliveGetMode: "N",
        bnfBankAccName: "",
        bnfBankCode: "",
        bnfBankAccNo: "",
        expayMode: "4",
        addRiskCode: "",
        // 续保
        effectiveDate: "",
        expiryDate: "",
      },
      tipsInfo: {
        hospitalCode: "",
        printPolType: "",
        payMode: "",
        bankCode: "",
        bankName: "",
        bankAccName: "",
        bankAccNo: "",
        firBankMobile: "",
        bankProvince: "",
        bankCity: "",
        bankCounty: "",
        bankArea: "",
        bankCardType: "",
        autoPayFlag: "",
        aliveGetMode: "",
        bnfBankCodeName: "",
        bnfBankCode: "",
        bnfBankAccNo: "",
      },
      pageLoad: false,
    };
  },
  computed: {
    ...mapGetters({
      payInfo: "insert/payInfo",
      applicant: "insert/applicant",
      bcardTypeList: "dictionary/bcardTypeList",
      hospitalCodeList: "dictionary/hospitalCodeList",
    }),
    bankList() {
      if (this.orderInfo.payMode == "R") {
        return this.bankR;
      }
      return this.bank7;
    },
    bankCodeName() {
      return this.orderInfo.bankName;
    },
    showTips() {
      let res = "";
      if (this.orderInfo.payMode == "R") {
        res = this.bankLimit.oneLimit || this.bankLimit.dayLimit;
      } else if (this.orderInfo.payMode == "7") {
        res = this.bankLimit.batch;
      }
      return res;
    },
    cpAcctNum: {
      get: function () {
        if (this.foI3) {
          return this.orderInfo.bankAccNo;
        }
        return accountCodeFormat(this.orderInfo.bankAccNo);
      },
      set: function (val) {
        this.changeData({
          bankAccNo: val.replace(/\s*/g, ""),
        });
      },
    },
    phoneSameWithAppnt() {
      let res = false;
      if (this.orderInfo.firBankMobile == this.applicant.phone) {
        res = true;
      }
      return res;
    },
  },
  watch: {
    orderInfo: {
      handler: function (val) {
        if (this.pageLoad) {
          this.$store.commit("insert/UPDATE_PAYINFO", val);
        }
      },
      deep: true,
    },
    "applicant.name": {
      handler: function (val) {
        if (this.pageLoad) {
          if (val) {
            this.orderInfo.bankAccName = val;
          }
        }
      },
      deep: true,
    },
  },
  mixins: [inputInfoForBillMixin, billDateMixin],
  created() {
    const billItem = this.payInfo;
    Object.keys(this.orderInfo).map((key) => {
      if (billItem.hasOwnProperty(key)) {
        this.orderInfo[key] = billItem[key];
      }
    });
    if (this.applicant.name) {
      this.changeData({ bankAccName: this.applicant.name });
    }
    this.$nextTick(() => {
      this.pageLoad = true;
      if (this.insu2Year && Object.keys(this.insu2Year).length > 0) {
        this.initInsureDate();
      }
    });
  },
  mounted() {
    // 缴费方式
    if (
      this.infoReg.hasOwnProperty("payMode") &&
      this.payModeList.length == 1
    ) {
      this.changeData({
        payMode: this.payModeList[0].value,
      });
    }
  },
  methods: {
    saveForm() {
      // 校验+提交
      const iptCfg = JSON.parse(JSON.stringify(this.infoReg));
      let res = validBillInfo(iptCfg, this.orderInfo);
      if (res.status == false) {
        let id = "ref" + res.target;
        let target = document.querySelector("." + id);
        this.tipsInfo[res.target] = res.msg;
        if (target) {
          target.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });
        }
        this.$msAlert(`${res.msg}`, `保单信息规则校验`);
      }
      return res;
    },
    changeMsRadio(type, item) {
      let obj = {};
      obj[type] = item.value;
      this.changeData(obj);
      if (type === "payMode") {
        // 批扣提示
        if (item.value == "7") {
          this.$msAlert(
            `选择【 ${item.label}】不能实时承保，需等待银行批次扣款完成才能承保`
          );
        }
        // 判断已选择的银行是否在 对应的缴费方式中
        if (this.orderInfo.bankCode) {
          let target = this.bankList.find(
            (item) => item.keyId == this.orderInfo.bankCode
          );
          // 未找到对应的银行 置空
          if (!target) {
            this.orderInfo.bankName = "";
            this.orderInfo.bankCode = "";
            this.orderInfo.bankAccNo = "";
          }
        }
      }
    },
    onConfirmPick(value) {
      if (this.popConfig.key == "bankCode") {
        this.changeData({
          bankCode: value.keyId,
          bankName: value.text,
        });
      } else if (this.popConfig.key == "bnfBankCode") {
        this.changeData({
          bnfBankCode: value.keyId,
          bnfBankCodeName: value.text,
        });
      } else if (this.popConfig.key == "hospitalCode") {
        this.changeData({
          hospitalCode: value.keyId,
          hospitalCodeName: value.text,
        });
      }
      this.showPop = false;
    },
    ocrSureBtn(obj) {
      // console.log('ocrSureBtn---bank', obj);
      if (!obj) {
        this.showSheet = false;
        return;
      }
      if (obj.bankAccNo) {
        this.orderInfo.bankAccNo = obj.bankAccNo;
      }
      if (obj.bankCode) {
        this.orderInfo.bankCode = obj.bankCode;
        this.orderInfo.bankName = obj.bankCodename;
      }
      this.showSheet = false;
    },
    // 地址确认
    addresssConfirm(value) {
      // console.log(value)
      if (this.popConfig.key == "bankArea") {
        this.changeData({
          rgtAddress: value.rgtAddress, // 省市
          bankArea: value.addressDetail, // 省市区
          bankCity: value.cityCode,
          bankCounty: value.countyCode,
          bankProvince: value.provinceCode,
          // openBankProvinceName: value.provinceName,
        });
      }
      this.showPop = false;
    },
    conformRadio(resObj) {
      this.changeData(resObj);
    },
    sameToAppnt(event, type) {
      if (event) event.preventDefault();
      if (type == "firBankMobile") {
        this.changeData({
          firBankMobile: !this.phoneSameWithAppnt ? this.applicant.phone : "",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "../style.less";

.show-tips {
  width: 100%;
  line-height: 1.5;
  padding: 5px 14px;
  font-size: 12px;
}
</style>
